<template>
    <div class="song">
        <h1>相关歌曲</h1>
        <div class="SongLists">
            <div class="songItem" v-for="(item,index) in songs" :key="index">
                <img :src="item.pic" style="width: 0.7rem;height: 0.7rem;border-radius: 0.15rem;"/>
                <div style="margin-left: 0.18rem;width: 5.1rem;">
                    <p style="font-weight: bold;">{{item.name}}</p>
                    <p style="text-overflow: ellipsis;white-space: nowrap;width: 5rem;overflow: hidden;">{{item.writer}} - {{item.name}}</p>
                </div>
                <div>
                    <i class="iconfont icon-bofangshipin" style="font-size:0.45rem;margin-right: 0.2rem;"></i>
                </div>
            </div> 
        </div>
    </div>
</template>

<script>
    import {useRouter,useRoute} from 'vue-router'
    import {reactive,toRefs,onMounted} from 'vue'
    import axios from 'axios'
    
    export default{
        setup() {
            const state=reactive({
               songs:[]
            })
            onMounted(async()=>{
                let res2=await axios.get('http://localhost:3000/playlist/track/all?id=5444463825&limit=3').then(res=>res.data.songs);
                res2.forEach(res => {
                    let song={id:"",name:"",writer:"",pic:""};
                    song.id=res.id;
                    song.name=res.name;
                    song.writer=res.ar[0].name;
                    song.pic=res.al.picUrl+"?param=30y30";
                    state.songs.push(song);
                    console.log(song);
                });
            })
            return{
                ...toRefs(state),
            }
        }
    }
    </script>

<style>
.song{
    width: 7.5rem;
    height:3.5rem;
    padding: 0.2rem 0.28rem;
    border-radius: 0.2rem;
    background: rgba(200,200,200,0.3);
}
h1{
  font-weight: bold;
  font-size: 0.34rem;
}
.songItem{
  height: 0.8rem;
  margin:0.12rem 0 0.2rem 0.12rem;
  display: flex;
  align-items: center;
}
</style>